
/**
 * Updated-confirmation (for post and page changes)
 */

.updated-confirmation {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: z-index( 'root', '.updated-confirmation' );
	background-color: rgba(255, 255, 255, 0.8);
	.conf-alert {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
		width: (166 / 16) * 1em;
		font-size: (16 / 15) * 1em;
		padding: (12 / 16) * 1em;
		text-align: center;
		background-color: $white;
		border-radius: 3px;
		border: solid 1px $alert-green;
		color: $alert-green;
		transition: border-color 0.3s ease, color 0.3s ease;
		.conf-alert_title {
			&:after {
				@extend %noticon;
				content: '\f418';
				font-size: (24 / 16) * 1em;
				vertical-align: top;
			}
		}
		hr {
			background: #eee;
			margin: (10 / 16) * 1em 0 0;
		}
		.undo {
			display: block;
			font-size: (12 / 16) * 1em;
			color: $gray;
			padding: (10 / 12) * 1em 0 0;
			&:hover {
				cursor: pointer;
			}
			.pages-list & {
				display: inline;
			}
			span {
				display: inline-block;
				border-bottom: solid 1px lighten( $gray, 20% );
			}
		}
		.pages-list & {
			width: auto;
			white-space: nowrap;
			padding: (4 / 16) * 1em (12 / 16) * 1em;
		}
		&.conf-alert--trashed,
		&.conf-alert--deleted,
		&.conf-alert--error {
			border-color: $alert-red;
			color: $alert-red;
		}
		&.conf-alert--trashing,
		&.conf-alert--updating {
			border-color: $blue-wordpress;
			color: $blue-wordpress;
			.loading-dot {
				animation-name: loading-dot-pulse;
				animation-duration: 0.5s;
				animation-fill-mode: both;
				animation-iteration-count: infinite;
				&:nth-child(2) {
					animation-delay: 0.15s;
				}
				&:last-child {
					animation-delay: 0.3s;
				}
			}
			.conf-alert_title {
				&:after {
					content: '';
				}
			}
		}
		&.conf-alert--trashed {
			.conf-alert_title {
				&:after {
					content: '\f407';
				}
			}
		}
		&.conf-alert--deleted,
		&.conf-alert--error {
			.conf-alert_title {
				&:after {
					content: '';
				}
			}
		}
	}
}

.updated-trans-enter {
	transition: opacity 0.3s ease;
	opacity: 0;
	.updated-confirmation {
		pointer-events: none;
	}
	.conf-alert {
		transition: transform 0.3s cubic-bezier(0.160, 0.390, 0.220, 1.275), border-color 0.3s ease, color 0.3s ease;
		transform: translate(-50%, -50%) scale(0.5);
	}
	&.updated-trans-enter-active {
		opacity: 1;
		.updated-confirmation {
			pointer-events: auto;
		}
		.conf-alert {
			transform: translate(-50%, -50%) scale(1);
		}
	}
}

.updated-trans-leave {
	transition: opacity 0.3s ease;
	opacity: 1;
	.updated-confirmation {
		pointer-events: none;
	}
	.conf-alert {
		transition: transform 0.3s cubic-bezier(0.160, 0.390, 0.220, 1.275), border-color 0.3s ease, color 0.3s ease;
		transform: translate(-50%, -50%) scale(1);
	}
	&.updated-trans-leave-active {
		opacity: 0;
		.updated-confirmation {
			pointer-events: none;
		}
		.conf-alert {
			transform: translate(-50%, -50%) scale(0.5);
		}
	}
}
